<template>
  <navigator-menu></navigator-menu>
  <div
    style="
      width: 100vw;
      height: 100vh;
      position: fixed;
      top: 0;
      overflow: hidden;
    "
  >
    <img :src="cover" alt="" style="width: 100vw; z-index: 0" />
  </div>
  <el-card
    class="el-card-define"
    v-if="!loading"
    shadow="always"
    style="
      border-radius: 35px 15px;
      height: 100%;
      margin: 10vw;
      opacity: 0.95;
      min-height: 100%;
    "
  >
    <div class="informa" style="display: flex">
      <div id="title" style="width: 76%">
        <div style="display: flex">
          <div
            v-for="(tag, index) in paper.transFiled"
            :key="index"
            style="margin: 0 5px"
          >
            <el-tag
              style="
                background-color: #92b0d6;
                color: #0f0e0e;
                font-weight: bolder;
              "
              >{{ tag }}</el-tag
            >
          </div>
        </div>

        <h1 class="title">{{ paper.title }}</h1>
        <el-divider></el-divider>
        <div
          class="publishImform"
          style="color: grey; margin: 5px 6px; font-size: 13px"
        >
          <div style="display: flex">
            <p>{{ paper.year }}&nbsp;</p>
            <p>{{ paper.publisher }}.</p>
            <p>{{ paper.volume }}.</p>
            <p>{{ paper.issue }}&nbsp;</p>
            <p>Page&nbsp;{{ paper.page_start }}&nbsp;</p>
            <p>-{{ paper.page_end }}&nbsp;</p>
            <p>{{ paper.issn }}</p>
            <!--<p>{{ paper.isbn }}</p>!-->
          </div>
          <div>DOI:{{ paper.doi }}</div>
        </div>
        <el-card style="font-size: 14px">
          <div class="abstract">
            <p style="color: #ffa026; font-size: 20px; font-weight: 501">
              Abstract
            </p>
            <Eclipse
              :title="paper.abstract"
              :lineHeight="18"
              :eclipse="8"
            ></Eclipse>
            <!--<p>{{ paper.abstract }}</p>-->
          </div>
        </el-card>
        <el-card
          v-show="ifHaveKeywords"
          style="font-size: 14px; margin: 10px 0"
        >
          <div class="abstract">
            <div style="color: #ffa026; font-size: 20px; font-weight: 501">
              KeyWords
            </div>
            <div
              style="
                display: flex;
                color: black;
                font-weight: bold;
                flex-wrap: wrap;
              "
            >
              <div v-for="(keyword, index) in paper.keywords" :key="index">
                <p
                  class="a-name"
                  style="margin: 0 10px 0 0"
                  @click="showKeyRelative(keyword)"
                >
                  {{ keyword }}
                </p>
              </div>
            </div>
          </div>
        </el-card>
        <div
          class="author"
          style="display: flex; margin: 10px; flex-wrap: wrap"
        >
          <div
            style="color: rgb(166, 106, 11); font-size: 16px; font-weight: 501"
          >
            Authors:
          </div>
          <div v-for="(author, index) in paper.authors" :key="index">
            <div v-if="!ifneedchange">
              <el-popover
                placement="bottom"
                title="Author"
                :width="200"
                trigger="hover"
              >
                <template #reference>
                  <p
                    class="a-name"
                    style="margin: 0 6px; font-size: 15px"
                    @click="
                      visitAuthor(claim[index].judge, claim[index].userId)
                    "
                  >
                    <el-icon :size="15"><user /></el-icon>{{ author.name }}
                  </p>
                </template>
                <div class="Author-imf">
                  <div class="a-">
                    <div style="display: flex">
                      <div>姓名：</div>
                      <div>{{ author.name }}</div>
                    </div>
                    <div>所属机构：</div>
                    <div>{{ author.org }}</div>
                  </div>
                  <div
                    v-if="claim[index].judge && claim[index].userId != userId"
                    class="a-opr"
                    style="
                      display: flex;
                      justify-content: center;
                      margin: 10px 5px 3px 5px;
                    "
                  >
                    <el-button
                      @click="
                        followscholar(
                          !claim[index].isFollow,
                          claim[index].userId,
                          index
                        )
                      "
                    >
                      <div v-if="claim[index].isFollow">取消关注</div>
                      <div v-else>关注</div>
                    </el-button>
                    <el-button
                      @click="sendmsg(claim[index].userId, author.name)"
                      >私信</el-button
                    >
                  </div>
                  <div
                    v-else-if="!claim[index].judge"
                    class="a-opr"
                    style="
                      display: flex;
                      justify-content: center;
                      margin: 10px 5px 3px 5px;
                    "
                  >
                    <el-button @click="Claimauthors(author.id, index)"
                      >认领</el-button
                    >
                  </div>
                </div>
              </el-popover>
            </div>
            <div v-else>
              <p
                class="a-name"
                style="margin: 0 6px; font-size: 15px; color: red"
                @click="visitAuthor(claim[index].judge, claim[index].userId)"
              >
                <el-icon :size="15"><user /></el-icon>{{ author.name }}
              </p>
            </div>
          </div>
        </div>
      </div>
      <div
        class="AsideImfor"
        style="
          text-align: center;
          width: 24%;
          justify-content: center;
          display: flex;
        "
      >
        <el-card>
          <div>
            <h2 v-if="ifcitation" class="n-citation" style="font-size: 30px">
              {{ paper.n_citation }}
            </h2>
            <p v-if="ifcitation" style="font-size: 20px; margin: 10px 0">
              被引量
            </p>
            <h2 style="font-size: 30px">{{ paper.vis_count }}</h2>
            <p style="font-size: 20px; margin: 10px 0">阅读量</p>
            <div style="margin: 50px 0 0 0">
              <div class="a-button">
                <el-button
                  style="background-color: #ffcc7b; display: flex"
                  @click="changeCollec()"
                >
                  <div style="display: flex">
                    <el-icon :size="18"
                      ><div v-if="ifCollec == false"><star /></div>
                      <div v-else><StarFilled /></div
                    ></el-icon>
                    <div v-if="ifCollec == false">收藏</div>
                    <div v-else>取消收藏</div>
                  </div></el-button
                >
              </div>
              <div class="a-button">
                <el-button
                  style="background-color: #ffcc7b"
                  @click="Complained()"
                  ><el-icon :size="18"><plus /></el-icon>申诉</el-button
                >
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="articleLink" style="margin-bottom: 30px">
      <el-card class="box-card">
        <div style="display: flex; align-items: center">
          <p>论文获取连接:</p>
          <el-select
            v-model="chooseLink"
            placeholder="获取链接"
            style="margin: 0 20px; width: 50%"
          >
            <el-option
              v-for="(item, num) in paper.url"
              :key="num"
              :label="item"
              :value="item"
            >
            </el-option>
          </el-select>
          <el-button :icon="share" type="primary" round @click="gotolink()"
            >跳转到该链接</el-button
          >
        </div>
      </el-card>
    </div>
    <div class="showBlock" style="display: flex">
      <div class="detail" style="width: 70%">
        <el-tabs type="border-card" style="" v-model="cardChoose">
          <el-tab-pane
            label="问答评论"
            name="问答评论"
            style="margin: 10px 20px"
          >
            <div
              class="add-comment"
              style="border-bottom: solid; margin-bottom: 10px"
            >
              <div>
                <el-input
                  v-model="textarea"
                  :rows="5"
                  type="textarea"
                  placeholder="在此输入想要发表的评论"
                  style="width: 99%"
                />
                <div style="display: flex; margin: 10px">
                  <el-button
                    type="success"
                    @click="AddComment()"
                    style="margin-left: auto"
                    >发表</el-button
                  >
                </div>
              </div>
            </div>
            <div v-if="ifhaveComment">
              <el-scrollbar max-height="700px">
                <div v-for="(comment, index) in comments" :key="index">
                  <div class="comment-card" style="margin: 3px 0">
                    <div style="display: flex">
                      <el-avatar
                        style="weight: 10%; cursor: pointer"
                        :src="comment.imageUrl"
                        @click="visitUser(comment.userId)"
                      ></el-avatar>
                      <div style="weight: 90%; margin-left: 10px">
                        <p
                          class="visitUser"
                          style="
                            margin: 1px 0;
                            font-size: 15px;
                            cursor: pointer;
                          "
                          @click="visitUser(comment.userId)"
                        >
                          {{ comment.commenterName }}
                        </p>
                        <p
                          style="margin: 1px 0; font-size: 11px; color: #8b8181"
                        >
                          {{ comment.createTime }}
                        </p>
                      </div>
                    </div>
                    <div class="c-content" style="display: flex">
                      <div style="width: 90%; font-size: 15px">
                        {{ comment.content }}
                      </div>
                      <div
                        style="
                          width: 10%;
                          text-align: center;
                          font-size: 13px;
                          display: flex;
                        "
                      >
                        <div style="display: flex"></div>
                        <button
                          class="commentBtn"
                          @click="changelike(index)"
                          style="
                            border: none;
                            background-color: white;
                            cursor: pointer;
                          "
                        >
                          <i
                            :class="
                              comment.iflike == false
                                ? 'iconfont icon-like'
                                : 'iconfont icon-like-fill'
                            "
                            style="font-size: 17px"
                          ></i>
                        </button>
                        {{ comment.likes }}
                        <button
                          class="commentBtn"
                          v-show="userId == comment.userId"
                          @click="deleteComment(comment.id)"
                          style="
                            border: none;
                            background-color: white;
                            cursor: pointer;
                            margin: 0 5px;
                          "
                        >
                          <el-icon><delete /></el-icon>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </el-scrollbar>
            </div>
            <div v-else>
              <el-empty description="快来发表第一条评论吧！"></el-empty>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div style="width: 30%">
        <div class="recommend" v-show="ifHaveKeywords">
          <el-card class="about-keyword el-card-define">
            <p
              class="relative"
              style="
                font-size: 18px;
                margin: 5px 10px 20px 0;
                font-weight: bold;
              "
            >
              相关论文&nbsp;<el-tooltip
                placement="bottom-start"
                content="刷新一下"
                ><el-icon
                  v-show="ifgetkeywordsArti"
                  style="font-size: 18px; cursor: pointer"
                  @click="refresh(1)"
                  ><refresh /></el-icon
              ></el-tooltip>
            </p>
            <div
              v-if="ifgetkeywordsArti"
              style="margin: 5px 12px; font-size: 13px"
            >
              <div
                v-for="(article, index) in RelativePaper"
                :key="index"
                style="margin: 20px 0; cursor: pointer"
                @click="gotoAnother(article.id)"
              >
                <div class="choose-art" style="text-decoration: underline">
                  <span v-html="article.title"></span>
                </div>
              </div>
            </div>
            <dir v-else style="padding: 0">
              <el-empty
                description="请更换一个关键词查看其相关论文~"
              ></el-empty>
            </dir>
          </el-card>
        </div>
        <div class="recommend">
          <el-card class="about-keyword el-card-define">
            <p
              class="relative"
              style="
                font-size: 18px;
                margin: 5px 10px 20px 0;
                font-weight: bold;
              "
            >
              领域其他论文推荐&nbsp;<el-tooltip
                placement="bottom-start"
                content="刷新一下"
                ><el-icon
                  style="font-size: 18px; cursor: pointer"
                  @click="refresh(2)"
                  ><refresh /></el-icon
              ></el-tooltip>
            </p>
            <div style="margin: 5px 12px; font-size: 13px">
              <div
                v-for="(article, index) in FieldOtherArticle"
                :key="index"
                style="margin: 20px 0; cursor: pointer"
                @click="gotoAnother(article.id)"
              >
                <div class="choose-art" style="text-decoration: underline">
                  <span v-html="article.title"></span>
                </div>
              </div>
            </div>
          </el-card>
        </div>
      </div>
    </div>
  </el-card>

  <el-card
    v-loading="loading"
    class="el-card-define"
    v-if="loading"
    shadow="always"
    style="
      border-radius: 35px 15px;
      height: 500px;
      margin: 10vw;
      opacity: 0.95;
      min-height: 100%;
    "
  >
  </el-card>
  <!-- 认领窗口 -->
  <el-dialog v-model="Claim_dialog" title="认领" width="40%">
    <el-form
      label-position="top"
      :model="authenticationImf"
      :rules="rules2"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="验证邮箱" prop="mailAddress">
        <el-input
          v-model="authenticationImf.mailAddress"
          placeholder="请输入验证邮箱"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button v-if="!ifSendMail" type="primary" round @click="UserClaim()"
          >发送验证码</el-button
        >
        <div style="display: flex" v-if="ifSendMail">
          <p>验证码已发送，请注意查收</p>
        </div>
      </el-form-item>
      <el-form-item label="验证邮箱" prop="confirmationNum">
        <el-input
          v-model="authenticationImf.confirmationNum"
          placeholder="请输入邮箱验证码"
        ></el-input>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="Claim_dialog = false">取消</el-button>
        <el-button type="primary" @click="confirmClaim()">提交申请</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 申诉表单 -->
  <el-dialog v-model="dialogAppealForm" title="申诉" width="50%">
    <el-form
      label-position="top"
      :model="complainedForm"
      :rules="rules"
      label-width="120px"
      class="demo-ruleForm"
    >
      <el-form-item label="申诉对象" prop="author">
        <el-select v-model="complainedForm.author" placeholder="请选择申诉对象">
          <el-option
            v-for="(item, index) in AbleComplained"
            :key="index"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申诉理由" prop="reason">
        <el-input
          v-model="complainedForm.reason"
          :rows="5"
          type="textarea"
          placeholder="请详细描述您的申诉理由(不多于500字)"
        ></el-input>
      </el-form-item>
      <el-form-item label="补充申诉截图材料（可上传论文录用证明截图等信息）">
        <el-upload
          ref="upload"
          action="action"
          class="upload-demo"
          :http-request="uploadImage"
          :file-list="fileList"
          accept="image/jpeg,image/png,image/jpg"
          :before-upload="onBeforeUploadImage"
          :auto-upload="false"
        >
          <template #trigger>
            <el-button size="small" type="primary">选择图片</el-button>
          </template>
          <p></p>
          <template #tip>
            <div class="el-upload__tip">图片大小不超过1Mb</div>
          </template>
        </el-upload>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submitUpload()">提交</el-button>
        <el-button @click="dialogAppealForm = false">取消</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- <el-card v-if="dialogAppealForm" shadow="always" style="width:23vw; height:33vw; border-radius: 35px 35px 35px 35px; margin: 9vw 15vw 1vw 36vw; opacity: 0.95">

  </el-card> -->

  <!-- 发送私信 -->
  <el-dialog
    v-model="sendmessage"
    title="发送私信"
    width="40%"
    :before-close="handleClose"
  >
    <p style="margin: 10px 0">发送给：</p>
    <el-input v-model="receiver" disabled />
    <p style="margin: 10px 0">主题：</p>
    <el-input v-model="messageTitle" placeholder="请输入私信主题，不多于50字" />
    <p style="margin: 10px 0">内容：</p>
    <el-input
      v-model="message"
      :rows="4"
      type="textarea"
      placeholder="请输入私信内容，不多于225字"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="sendmessage = false">取消</el-button>
        <el-button type="primary" @click="ComfirmSend()">发送</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import NavigatorMenu from "../components/NavigatorMenu";
import * as echarts from "echarts";
import { ref } from "@vue/reactivity";
import { ElMessage } from "element-plus";
import { data } from "dom7";
import Eclipse from "../components/elipse_contain.vue";

export default {
  name: "PaperDetail",
  components: {
    NavigatorMenu,
    echarts,
    Eclipse,
  },
  data() {
    return {
      ifneedchange: false,
      chooseKey: "", // 选择的关键词
      // 学者身份：1-2-3分别表示普通用户，学者，管理员
      ifcitation: false, // 判断是否含有引用量
      identity: 0,
      CN_field: [
        { name: "info", trans: "信息学" },
        { name: "medical", trans: "医学" },
        { name: "eco", trans: "经济学" },
        { name: "astro-ph", trans: "天体物理学" },
        { name: "astro-ph.CO", trans: "宇宙学与非星系天体物理学" },
        { name: "astro-ph.EP", trans: "地球与行星天体物理学" },
        { name: "astro-ph.GA", trans: "星系天体物理学" },
        { name: "astro-ph.HE", trans: "高能天体物理现象学" },
        { name: "astro-ph.IM", trans: "天体物理学的仪器和方法" },
        { name: "astro-ph.SR", trans: "太阳和恒星天体物理学" },
        { name: "cond-mat.dis-nn", trans: "无序系统与神经网络" },
        { name: "cond-mat.mes-hall", trans: "中尺度和纳米级物理" },
        { name: "cond-mat.mtrl-sci", trans: "材料科学" },
        { name: "cond-mat.other", trans: "其他凝聚态物质" },
        { name: "cond-mat.quant-gas", trans: "量子气体" },
        { name: "cond-mat.soft", trans: "软凝聚态物质" },
        { name: "cond-mat.stat-mech", trans: "统计力学" },
        { name: "cond-mat.str-el", trans: "电子波函数" },
        { name: "cond-mat.supr-con", trans: "超导电性" },
        { name: "cs.AI", trans: "人工智能" },
        { name: "cs.AR", trans: "硬件架构" },
        { name: "cs.CC", trans: "计算复杂性" },
        { name: "cs.CE", trans: "计算工程、金融和科学" },
        { name: "cs.CG", trans: "计算几何" },
        { name: "cs.CL", trans: "计算和语言" },
        { name: "cs.CR", trans: "加密与安全" },
        { name: "cs.CV", trans: "计算机视觉和模式识别" },
        { name: "cs.CY", trans: "计算机与社会" },
        { name: "cs.DB", trans: "数据库" },
        { name: "cs.DC", trans: "分布式、并行和集群计算" },
        { name: "cs.DL", trans: "数字图书馆" },
        { name: "cs.DM", trans: "离散数学" },
        { name: "cs.DS", trans: "数据结构和算法" },
        { name: "cs.ET", trans: "新兴技术" },
        { name: "cs.FL", trans: "形式语言与自动机理论" },
        { name: "cs.GL", trans: "一般文献" },
        { name: "cs.GR", trans: "制图学" },
        { name: "cs.GT", trans: "计算机科学与博弈论" },
        { name: "cs.HC", trans: "人机交互" },
        { name: "cs.IR", trans: "信息检索" },
        { name: "cs.IT", trans: "信息论" },
        { name: "cs.LG", trans: "机器学习" },
        { name: "cs.LO", trans: "计算机科学中的逻辑" },
        { name: "cs.MA", trans: "多智能体系统" },
        { name: "cs.MM", trans: "多媒体" },
        { name: "cs.MS", trans: "数学软件" },
        { name: "cs.NA", trans: "数值分析" },
        { name: "cs.NE", trans: "神经与进化计算" },
        { name: "cs.NI", trans: "网络与互联网架构" },
        { name: "cs.OH", trans: "其他计算机科学" },
        { name: "cs.OS", trans: "操作系统" },
        { name: "cs.PF", trans: "性能" },
        { name: "cs.PL", trans: "编程语言" },
        { name: "cs.RO", trans: "机器人学" },
        { name: "cs.SC", trans: "符号计算" },
        { name: "cs.SD", trans: "响应" },
        { name: "cs.SE", trans: "软件工程" },
        { name: "cs.SI", trans: "社会与信息网络" },
        { name: "cs.SY", trans: "系统控制" },
        { name: "econ.EM", trans: "经济计量学" },
        { name: "eess.AS", trans: "语音与音频处理" },
        { name: "eess.IV", trans: "图像与视频处理" },
        { name: "eess.SP", trans: "信号处理" },
        { name: "gr-qc", trans: "广义相对论和量子宇宙学" },
        { name: "hep-ex", trans: "高能物理-实验" },
        { name: "hep-lat", trans: "高能物理-晶格" },
        { name: "hep-ph", trans: "高能物理-现象学" },
        { name: "hep-th", trans: "高能物理-理论" },
        { name: "math.AC", trans: "交换代数" },
        { name: "math.AG", trans: "代数几何" },
        { name: "math.AP", trans: "项目态势评估分析" },
        { name: "math.AT", trans: "代数拓扑" },
        { name: "math.CA", trans: "经典分析与常微分方程" },
        { name: "math.CO", trans: "组合学" },
        { name: "math.CT", trans: "电子理论" },
        { name: "math.CV", trans: "复杂变量" },
        { name: "math.DG", trans: "微分几何" },
        { name: "math.DS", trans: "动态系统" },
        { name: "math.FA", trans: "泛函分析" },
        { name: "math.GM", trans: "普通数学" },
        { name: "math.GN", trans: "一般拓扑学" },
        { name: "math.GR", trans: "群论" },
        { name: "math.GT", trans: "几何拓扑学" },
        { name: "math.HO", trans: "历史和概述" },
        { name: "math.IT", trans: "信息论" },
        { name: "math.KT", trans: "K理论与同源性" },
        { name: "math.LO", trans: "逻辑学" },
        { name: "math.MG", trans: "几何度量学" },
        { name: "math.MP", trans: "数学物理" },
        { name: "math.NA", trans: "数值分析" },
        { name: "math.NT", trans: "数论" },
        { name: "math.OA", trans: "运算符代数" },
        { name: "math.OC", trans: "最优化及控制" },
        { name: "math.PR", trans: "概率" },
        { name: "math.QA", trans: "量子代数" },
        { name: "math.RA", trans: "环与代数" },
        { name: "math.RT", trans: "表示论" },
        { name: "math.SG", trans: "辛几何" },
        { name: "math.SP", trans: "光谱理论" },
        { name: "math.ST", trans: "统计理论" },
        { name: "math-ph", trans: "数学物理" },
        { name: "nlin.AO", trans: "适应和自组织系统" },
        { name: "nlin.CD", trans: "混沌动力学" },
        { name: "nlin.CG", trans: "细胞自动机和晶格气体" },
        { name: "nlin.PS", trans: "模式形成与孤子" },
        { name: "nlin.SI", trans: "完全可解和可积的系统" },
        { name: "nucl-ex", trans: "核实验" },
        { name: "nucl-th", trans: "核理论" },
        { name: "physics.acc-ph", trans: "加速器物理" },
        { name: "physics.ao-ph", trans: "大气和海洋物理学" },
        { name: "physics.app-ph", trans: "应用物理学" },
        { name: "physics.atm-clus", trans: "原子簇和分子簇" },
        { name: "physics.atom-ph", trans: "原子物理学" },
        { name: "physics.bio-ph", trans: "生物物理学" },
        { name: "physics.chem-ph", trans: "化学物理学" },
        { name: "physics.class-ph", trans: "经典物理学" },
        { name: "physics.comp-ph", trans: "计算物理学" },
        { name: "physics.data-an", trans: "数据分析、统计与概率" },
        { name: "physics.ed-ph", trans: "物理教育" },
        { name: "physics.flu-dyn", trans: "流体力学" },
        { name: "physics.gen-ph", trans: "普通物理" },
        { name: "physics.geo-ph", trans: "地球物理学" },
        { name: "physics.hist-ph", trans: "物理学史和哲学" },
        { name: "physics.ins-det", trans: "仪器仪表和探测器" },
        { name: "physics.med-ph", trans: "医学物理" },
        { name: "physics.optics", trans: "光学" },
        { name: "physics.plasm-ph", trans: "等离子物理" },
        { name: "physics.pop-ph", trans: "热门物理" },
        { name: "physics.soc-ph", trans: "物理学与社会" },
        { name: "physics.space-ph", trans: "空间物理" },
        { name: "q-bio.BM", trans: "生物分子" },
        { name: "q-bio.CB", trans: "细胞行为" },
        { name: "q-bio.GN", trans: "基因组学" },
        { name: "q-bio.MN", trans: "分子网络" },
        { name: "q-bio.NC", trans: "神经元和认知" },
        { name: "q-bio.OT", trans: "其他定量生物学" },
        { name: "q-bio.PE", trans: "种群与进化" },
        { name: "q-bio.QM", trans: "定量方法" },
        { name: "q-bio.SC", trans: "亚细胞过程" },
        { name: "q-bio.TO", trans: "组织和器官" },
        { name: "q-fin.CP", trans: "计算金融学" },
        { name: "q-fin.EC", trans: "经济学" },
        { name: "q-fin.GN", trans: "一般金融" },
        { name: "q-fin.MF", trans: "数理金融学" },
        { name: "q-fin.PM", trans: "投资组合管理" },
        { name: "q-fin.PR", trans: "证券定价" },
        { name: "q-fin.RM", trans: "风险管理" },
        { name: "q-fin.ST", trans: "统计金融" },
        { name: "q-fin.TR", trans: "交易和市场微观结构" },
        { name: "quant-ph", trans: "量子物理" },
        { name: "stat.AP", trans: "应用软件" },
        { name: "stat.CO", trans: "计算" },
        { name: "stat.ME", trans: "方法论" },
        { name: "stat.ML", trans: "机器学习" },
        { name: "stat.OT", trans: "其他统计数据" },
        { name: "stat.TH", trans: "统计理论" },
      ],
      userId: 1,
      paperId: "",
      ifgetkeywordsArti: false,
      ifHaveKeywords: false, // 判断论文是否含有关键字
      keynum: 0,
      chooseLink: ref(""), // 选择的论文链接
      paper: {
        authors: [{ name: "", id: 0 }],
        field: [],
      },
      ifhaveComment: false,
      comments: [],
      page: 1,
      maxpage: 2,
      fieldpage: 1,
      maxfieldpage: 2,
      RelativePaper: [{ title: "", id: "" }],
      FieldOtherArticle: [],
      ifShow: false,
      textarea: ref(""),
      ifCollec: false,
      // 控制发送私信dialog的出现
      sendmessage: false,
      receiverId: 0,
      receiver: ref(""),
      message: ref(""),
      messageTitle: ref(""),
      cardChoose: "问答评论",
      sortWay: 1,
      // 控制认领dialog的出现
      Claim_dialog: false,
      ifSendMail: false,
      claimedId: "",
      authenticationImf: {
        mailAddress: "", // 验证码接受邮箱
        confirmationNum: "", // 认证验证码
      },
      // 判断初始化数据是否加载完毕
      loading: true,
      total: 0,
      // 记录作者的认领情况
      claim: [{ userId: 0, judge: false, isFollow: false, name: "" }],
      // 申诉所需属性↓
      AbleComplained: [{ userId: 0, judge: false, isFollow: false, name: "" }],
      fileList: [],
      dialogAppealForm: false,
      complainedForm: {
        author: "",
        reason: "",
      },
      rules: {
        reason: [
          {
            required: true,
            message: "请输入申诉原因",
            trigger: "blur",
          },
          {
            max: 500,
            message: "申诉理由不得多于500字",
            trigger: "blur",
          },
        ],
        author: [
          {
            required: true,
            message: "请选择一个申诉对象",
            trigger: "change",
          },
        ],
      },
      rules2: {
        mailAddress: [
          {
            required: true,
            message: "请输入邮箱",
            trigger: "blur",
          },
          {
            validator: function (rule, value, callback) {
              if (
                /^\w{1,64}@[a-z0-9\-]{1,256}(\.[a-z]{2,6}){1,2}$/i.test(
                  value
                ) == false
              ) {
                callback(new Error("邮箱格式错误"));
              } else {
                callback();
              }
            },
          },
        ],
        confirmationNum: [
          { required: true, message: "请输入验证码", trigger: "change" },
        ],
      },
      cover: require("../assets/images/apple.jpg"),
    };
  },
  created() {
    this.userId = sessionStorage.getItem("id");
    //this.paperId = "53e99e61b7602d97027281c2";
    console.log("获取paperId");
    this.paperId = sessionStorage.getItem("paperId");
    console.log(this.paperId);
    this.initialFunc(this.paperId);
    this.getcomment(this.paperId);
    // 获取用户的身份
    this.axios({
      methods: "get",
      url: "/api/user/",
      params: {
        userId: sessionStorage.getItem("id"),
      },
    }).then((result) => {
      if (result.data.code === 200) {
        this.identity = result.data.data.identity;
        console.log("use-identity");
        console.log(this.identity);
      }
    });
  },
  methods: {
    // 打开申诉表单
    Complained() {
      this.AbleComplained = this.claim.filter(
        (item) => item.judge && this.userId != item.userId
      );
      console.log("能申诉的学者：");
      console.log(this.AbleComplained);
      this.dialogAppealForm = true;
    },
    getcomment(id) {
      this.axios({
        methods: "get",
        url: "/api/communication/comment/",
        params: {
          paperId: id,
          userId: this.userId,
        },
      }).then((result) => {
        console.log("获取到评论了嘛");
        if (result.data.code === 200) {
          var comment = [];
          result.data.data.forEach((co) => {
            comment.push(
              Object.assign({}, co.comment, {
                commenterName: co.commenter.name,
                iflike: co.isLike,
                imageUrl: "http://124.70.186.113:39245" + co.commenter.avatar,
              })
            );
          });
          this.comments = comment;
          if (this.comments.length > 0) {
            this.ifhaveComment = true;
          } else {
            this.ifhaveComment = false;
          }
          this.comments.sort(function (a, b) {
            return a.createTime < b.createTime;
          });
          console.log(this.comments);
          this.total++;
          console.log("total:" + this.total);
          if (this.total === 6) {
            this.loading = false;
          }
        }
      });
    },
    initialFunc(id) {
      console.log(id);
      this.axios({
        methods: "get",
        url: "/api/paper/get-paper/",
        params: {
          Id: id,
        },
      }).then((response) => {
        console.log("用paperid获取数据如下:");
        console.log(response.data);
        this.paper = response.data.data;
        var transFiled = [];
        this.paper.field.forEach((t, index) => {
          var trans = this.CN_field.filter((tag) => tag.name === t);
          console.log(trans);
          transFiled.push(trans[0].trans);
        });
        this.paper = Object.assign({}, this.paper, {
          transFiled: transFiled,
        });
        console.log(this.paper);
        // 检查是否有引用量
        if (response.data.data.n_citation) {
          this.ifcitation = true;
        }
        // 获取作者的认领情况
        var RLauthor = [];
        this.paper.authors.forEach((author) => {
          if (author.id) {
            RLauthor.push(author.id);
          }
        });
        if (RLauthor.length === this.paper.authors.length) {
          this.axios({
            method: "post",
            url: "/api/scholar/getscholarbyauthorid/",
            data: {
              ids: RLauthor,
            },
          }).then((response) => {
            if (response.data.code === 200) {
              console.log("作者的认领情况：");
              console.log(response.data);
              var result = [];
              var follow = [];
              response.data.data.forEach((item, index) => {
                if (item === null) {
                  result.push({
                    authorId: "",
                    userId: 0,
                    judge: false,
                    name: this.paper.authors[index].name,
                  });
                } else {
                  result.push({
                    authorId: item.authorId,
                    userId: item.userId,
                    judge: true,
                    isFollow: false,
                    name: this.paper.authors[index].name,
                  });
                  follow.push(item.userId);
                }
              });
              this.claim = result;

              // 获取作者ID对应的学者ID
              this.axios({
                method: "post",
                url: "/api/scholar/getuserbyauthorid/",
                data: {
                  ids: RLauthor,
                },
              }).then((thing) => {
                if (thing.data.code === 200) {
                  response.data.data.forEach((item, index) => {
                    if (item !== null) {
                      this.claim[index] = Object.assign({}, this.claim[index], {
                        scholarId: item.scholarId,
                      });
                    }
                  });
                  console.log(this.claim);
                  this.total++;
                  console.log("total:" + this.total);
                  if (this.total === 6) {
                    this.loading = false;
                  }
                } else {
                  console.log("获取作者ID对应的学者ID失败");
                  console.log(thing.data.msg);
                }
              });
              // 获取关注情况
              this.axios({
                method: "post",
                url: "/api/follow/ask/",
                data: {
                  followerId: this.userId,
                  followingIds: follow,
                },
              }).then((followRe) => {
                if (followRe.data.code === 200) {
                  var index = 0;
                  this.claim.forEach((item) => {
                    if (item.judge) {
                      item.isFollow = followRe.data.data[index].isFollow;
                      index++;
                    }
                  });
                  this.total++;
                  console.log("total:" + this.total);
                  if (this.total === 6) {
                    this.loading = false;
                  }
                } else {
                  console.log("获取关注情况失败");
                  console.log(followRe.data.msg);
                }
              });
              this.total++;
              console.log("total:" + this.total);
              if (this.total === 6) {
                this.loading = false;
              }
            } else {
              console.log("获取作者信息失败");
            }
          });
        } else {
          this.ifneedchange = true;
          this.total += 3;
          console.log("total:" + this.total);
          if (this.total === 6) {
            this.loading = false;
          }
        }

        // 根据关键词获取相关文章
        if (response.data.data.keywords) {
          this.chooseKey = response.data.data.keywords[0];
          this.ifHaveKeywords = true;
          const Parameters = {
            condition: {
              key: "",
              option: 0,
              page: this.page,
              size: 5,
              value: response.data.data.keywords[0],
            },
            sort: 1,
            year: {
              l: 2000,
              r: 2020,
            },
          };
          this.axios({
            method: "post",
            url: "/api/paper/search-theme/",
            data: Parameters,
          }).then((re) => {
            if (re.data.code === 200) {
              this.ifgetkeywordsArti = true;
              console.log(re.data.data.total);
              this.maxpage = re.data.data.total / 5;
              console.log("这是根据关键词获取到的文章：");
              console.log(re.data.data);
              console.log(this.ifgetkeywordsArti);
              var arti = [];
              re.data.data.jsonArray.forEach((element) => {
                arti.push({
                  title: element.title,
                  id: element.id,
                });
              });
              this.RelativePaper = arti;
              this.page++;
              if (this.page > this.maxpage) {
                this.page = 1;
              }
            } else {
              console.log(re.data);
            }
          });
        }

        // 根据领域获取文章
        console.log(response.data.data.field[0]);
        this.axios({
          method: "post",
          url: "/api/paper/multi-search/",
          data: {
            conditions: [
              {
                key: "field.keyword",
                option: 0,
                page: this.fieldpage,
                size: 5,
                value: response.data.data.field[0],
              },
            ],
            sort: 1,
            year: {
              l: 2000,
              r: 2020,
            },
          },
        }).then((re) => {
          console.log("------------------");
          console.log(re.data);
          if (re.data.code === 200) {
            this.maxfieldpage = re.data.data.total / 5;
            var arti = [];
            re.data.data.jsonArray.forEach((element) => {
              arti.push({
                title: element.title,
                id: element.id,
              });
            });
            this.FieldOtherArticle = arti;
            this.fieldpage++;
            if (this.fieldpage > this.maxfieldpage) {
              this.fieldpage = 1;
            }
            this.total++;
            console.log("total:" + this.total);
            if (this.total === 6) {
              this.loading = false;
            }
          }
        });
      });
      // 判断是否收藏该文章
      this.axios({
        methods: "get",
        url: "/api/collection/",
        params: {
          userId: this.userId,
        },
      }).then((rlist) => {
        if (rlist.data.code === 200) {
          var index = rlist.data.data.findIndex((item) => item.id === id);
          this.ifCollec = index === -1 ? false : true;
          this.total++;
          console.log("total:" + this.total);
          if (this.total === 6) {
            this.loading = false;
          }
        }
      });
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 认领学术成果
    // 是普通用户时采用认证学者接口
    UserClaim() {
      if (this.authenticationImf.mailAddress == "") {
        ElMessage({
          message: "请输入验证邮箱",
          type: "warning",
        });
        return;
      }
      console.log("普通学者认证学者");
      this.axios({
        method: "post",
        url: "/api/scholar/become-scholar/",
        data: {
          authorId: this.claimedId,
          mail: this.authenticationImf.mailAddress,
        },
      }).then((re) => {
        if (re.data.code === 200) {
          this.ifSendMail = true;
        } else {
          ElMessage({
            message: re.data.msg,
            type: "error",
          });
        }
      });
    },
    Claimauthors(authorid, index) {
      if (this.identity == 1) {
        this.ifSendMail = false;
        this.Claim_dialog = true;
        this.claimedId = authorid;
      } else {
        // 学者认领接口
        console.log("学者认领学术成果");
        var Data = { authorId: authorid };
        console.log(Data);
        this.axios({
          method: "post",
          url: "/api/paper/own-paper/",
          data: Data,
        }).then((re) => {
          console.log(re.data);
          if (re.data.code === 200) {
            ElMessage({
              message: "认领论文成功",
              type: "success",
            });
            this.claim[index].userId = this.userId;
            this.claim[index].judge = true;
          } else {
            ElMessage({
              message: re.data.msg,
              type: "warning",
            });
          }
        });
      }
    },
    confirmClaim() {
      if (this.confirmationNum === "") {
        ElMessage({
          message: "请输入验证码！",
          type: "warning",
        });
      } else {
        this.axios({
          method: "post",
          url: "/api/scholar/vercode/",
          data: {
            vercode: this.authenticationImf.confirmationNum,
          },
        }).then((re) => {
          if (re.data.code === 200) {
            this.Claim_dialog = false;
            ElMessage({
              message: "认领成功！",
              type: "success",
            });
            this.confirmationNum = "";
            this.identity = 2;
            var RLauthor = [];
            this.paper.authors.forEach((author) => {
              RLauthor.push(author.id);
            });
            location.reload();
          } else {
            console.log("认领失败");
            console.log(re.data);
            ElMessage({
              message: re.data.msg,
              type: "error",
            });
          }
        });
      }
    },
    // 选择关键词搜索
    showKeyRelative(keyword) {
      this.chooseKey = keyword;
      this.ifgetkeywordsArti = false;
      this.page = 2;
      const Parameters = {
        condition: {
          key: "",
          option: 0,
          page: 1,
          size: 5,
          value: keyword,
        },
        sort: 1,
        year: {
          l: 2000,
          r: 2020,
        },
      };
      this.axios({
        method: "post",
        url: "/api/paper/search-theme/",
        data: Parameters,
      }).then((re) => {
        if (re.data.code === 200) {
          this.ifgetkeywordsArti = true;
          console.log(re.data.data.total);
          this.maxpage = re.data.data.total / 5;
          console.log("这是根据关键词获取到的文章：");
          console.log(re.data.data);
          console.log(this.maxpage);
          var arti = [];
          re.data.data.jsonArray.forEach((element) => {
            arti.push({
              title: element.title,
              id: element.id,
            });
          });
          this.RelativePaper = arti;
          if (2 > this.maxpage) {
            this.page = 1;
          }
        } else {
          console.log(re.data);
        }
      });
    },
    // 发送私信
    sendmsg(userId, name) {
      this.receiver = name;
      this.receiverId = userId;
      this.sendmessage = true;
    },
    ComfirmSend() {
      if (this.message === "") {
        ElMessage({
          message: "请输入发送内容!",
          type: "warning",
        });
      } else if (this.messageTitle === "") {
        ElMessage({
          message: "请输入发送主题!",
          type: "warning",
        });
      } else if (this.messageTitle.length > 50) {
        ElMessage({
          message: "私信主题不得多于50字",
          type: "warning",
        });
      } else if (this.message.length > 225) {
        ElMessage({
          message: "发送消息不得多于225字",
          type: "warning",
        });
      } else {
        this.axios({
          method: "post",
          url: "/api/communication/message/",
          data: {
            content: this.message,
            id: 0,
            isRead: false,
            ownerId: this.receiverId,
            senderId: this.userId,
            title: this.messageTitle,
          },
        }).then((re) => {
          if (re.data.code === 200) {
            ElMessage({
              message: "成功发送私信！",
              type: "success",
            });
            this.message = "";
            this.messageTitle = "";
            this.sendmessage = false;
          } else {
            ElMessage({
              message: "发送私信失败",
              type: "error",
            });
          }
        });
      }
    },
    // 关注和取消关注
    followscholar(judge, followingId, index) {
      if (judge) {
        // 关注用户
        this.axios({
          method: "post",
          url: "/api/follow/",
          data: {
            followerId: this.userId,
            followingId: followingId,
            id: 0,
          },
        }).then((res) => {
          if (res.data.code === 200) {
            ElMessage({
              message: "关注用户成功!",
              type: "success",
            });
            this.claim[index].isFollow = true;
          } else {
            ElMessage({
              message: "关注用户失败",
              type: "error",
            });
            console.log(res.data.msg);
          }
        });
      } else {
        // 取消关注用户
        this.axios({
          method: "delete",
          url: "/api/follow/",
          data: {
            followerId: this.userId,
            followingId: followingId,
            id: 0,
          },
        }).then((res) => {
          if (res.data.code === 200) {
            ElMessage("成功取消关注!");
            this.claim[index].isFollow = false;
          } else {
            ElMessage({
              message: "取消关注失败",
              type: "error",
            });
            console.log(res.data.msg);
          }
        });
      }
    },
    // 点赞和取消点赞
    changelike(index) {
      console.log(this.comments[index]);
      if (!this.comments[index].iflike) {
        this.axios({
          method: "post",
          url: "/api/like/like/",
          data: {
            commentId: this.comments[index].id,
            id: 0,
            userId: this.userId,
          },
        }).then((re) => {
          if (re.data.code === 200) {
            console.log("点赞成功");
            this.comments[index].iflike = true;
            this.comments[index].likes++;
          } else {
            console.log(re.data);
          }
        });
      } else {
        this.axios({
          method: "post",
          url: "/api/like/dislike/",
          data: {
            commentId: this.comments[index].id,
            id: 0,
            userId: this.userId,
          },
        }).then((re) => {
          if (re.data.code === 200) {
            console.log("取消点赞成功");
            this.comments[index].iflike = false;
            this.comments[index].likes--;
          } else {
            console.log(re.data);
          }
        });
      }
    },
    // 收藏和取消收藏
    changeCollec() {
      this.ifCollec = !this.ifCollec;
      if (this.ifCollec) {
        this.axios({
          method: "post",
          url: "/api/collection/",
          data: {
            id: 0,
            paperId: this.paperId,
            userId: this.userId,
          },
        }).then((result) => {
          if (result.data.code === 200) {
            ElMessage({
              message: "成功收藏论文!",
              type: "success",
            });
          } else {
            ElMessage.error("收藏论文失败");
          }
        });
      } else {
        this.axios({
          method: "delete",
          url: "/api/collection/",
          data: {
            id: 0,
            paperId: this.paperId,
            userId: this.userId,
          },
        }).then((result) => {
          if (result.data.code === 200) {
            ElMessage("成功取消收藏论文!");
          } else {
            ElMessage.error("取消收藏失败");
          }
        });
      }
    },
    // 跳转到论文外部链接
    gotolink() {
      if (this.chooseLink.length !== 0) {
        console.log(this.chooseLink);
        window.open(this.chooseLink, "_blank");
      }
    },
    gotoAnother(id) {
      sessionStorage.setItem("paperId", id);
      location.reload();
      /*this.total = 0;
      this.loading = true;
      this.ifHaveKeywords = false;
      this.initialFunc(id);
      this.paperId = id;
      this.getcomment(this.paperId);*/
    },
    // 添加评论
    AddComment() {
      this.axios({
        method: "post",
        url: "/api/communication/comment/",
        data: {
          content: this.textarea,
          id: 0,
          likes: 0,
          paperId: this.paperId,
          userId: this.userId,
        },
      }).then((result) => {
        if (result.data.code === 200) {
          this.textarea = "";
          this.getcomment(this.paperId);
          ElMessage({
            message: "成功发表评论!",
            type: "success",
          });
        }
      });
    },
    // 刷新推荐的相关论文
    refresh(way) {
      if (way === 1) {
        console.log(this.chooseKey);
        const Parameters = {
          condition: {
            key: "",
            option: 0,
            page: this.page,
            size: 5,
            value: this.chooseKey,
          },
          sort: 1,
          year: {
            l: 2000,
            r: 2020,
          },
        };
        this.axios({
          method: "post",
          url: "/api/paper/search-theme/",
          data: Parameters,
        }).then((re) => {
          if (re.data.code === 200) {
            console.log("这是刷新之后根据关键词获取到的文章：");
            console.log(re.data.data);
            var arti = [];
            re.data.data.jsonArray.forEach((element) => {
              arti.push({
                title: element.title,
                id: element.id,
              });
            });
            this.RelativePaper = arti;
            console.log(this.RelativePaper);
            this.page++;
            if (this.page > this.maxpage) {
              this.page = 1;
            }
          } else {
            console.log(re.data);
          }
        });
      } else {
        const Parameters = {
          conditions: [
            {
              key: "field.keyword",
              option: 0,
              page: this.fieldpage,
              size: 5,
              value: this.paper.field[0],
            },
          ],
          sort: 1,
          year: {
            l: 2000,
            r: 2020,
          },
        };
        this.axios({
          method: "post",
          url: "/api/paper/multi-search/",
          data: Parameters,
        }).then((re) => {
          if (re.data.code === 200) {
            console.log("这是根据领域获取到的文章：");
            console.log(re.data.data);
            var arti = [];
            re.data.data.jsonArray.forEach((element) => {
              arti.push({
                title: element.title,
                id: element.id,
              });
            });
            this.FieldOtherArticle = arti;
            this.fieldpage++;
            if (this.fieldpage > this.maxfieldpage) {
              this.fieldpage = 1;
            }
          }
        });
      }
    },
    // 删除评论
    deleteComment(id) {
      console.log(id);
      this.axios({
        method: "delete",
        url: "/api/communication/comment/",
        params: {
          commentId: id,
        },
      }).then((re) => {
        if (re.data.code === 200) {
          ElMessage({
            message: "删除评论成功",
            type: "success",
          });
          this.getcomment(this.paperId);
        } else {
          ElMessage({
            message: "删除评论失败",
            type: "warning",
          });
        }
      });
    },
    visitAuthor(judge, id) {
      if (judge) {
        this.$router.push({
          path: "/MyPage",
          query: { userId: id, userIdIn: this.userId },
        });
      }
    },
    // 访问用户主页
    visitUser(id) {
      this.$router.push({
        path: "/MyPage",
        query: { userId: id, userIdIn: this.userId },
      });
    },
    sortA(w) {
      this.sortWay = w;
    },
    uploadImage(param) {
      console.log("test");
      const formData = new FormData();
      formData.append("file", param.file);
      formData.append("type", 21);
      var a = this.AbleComplained.filter(
        (item) => item.name === this.complainedForm.author
      );
      console.log(a[0].authorId);
      formData.append("complainedid", a[0].authorId);
      formData.append("reason", this.complainedForm.reason);
      formData.append("userId", a[0].userId);
      this.axios
        .post("/api/scholar/complain-scholar/", formData)
        .then((res) => {
          console.log("res");
          console.log(res);
          if (res.data.code == 200) {
            this.$message.success("成功提交申诉");
            this.dialogAppealForm = false;
            this.complainedForm.author = "";
            this.complainedForm.reason = "";
            this.$refs.upload.clearFiles();
          } else {
            this.$message.info("提交申诉失败");
          }
        });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("Avatar picture must be JPG format!");
      }
      if (!isLt2M) {
        this.$message.error("Avatar picture size can not exceed 2MB!");
      }
      return isJPG && isLt2M;
    },
    onBeforeUploadImage(file) {
      const isIMAGE = file.type === "image/jpeg" || "image/jpg" || "image/png";
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (!isIMAGE) {
        this.$message.error("上传文件只能是图片格式!");
      }
      if (!isLt1M) {
        this.$message.error("上传文件大小不能超过 1MB!");
      }
      return isIMAGE && isLt1M;
    },
    // 向后端发送申请
    submitUpload: function () {
      if (
        this.complainedForm.author != "" &&
        this.complainedForm.reason != ""
      ) {
        console.log("filelist");
        var num = this.$refs.upload.uploadFiles.length;
        console.log(num);
        if (num > 0) {
          this.$refs.upload.submit();
        } else {
          const formData = new FormData();
          formData.append("type", 21);
          var a = this.AbleComplained.filter(
            (item) => item.name === this.complainedForm.author
          );
          console.log(a[0].authorId);
          formData.append("complainedid", a[0].authorId);
          formData.append("reason", this.complainedForm.reason);
          formData.append("userId", a[0].userId);
          this.axios
            .post("/api/scholar/complain-scholar/", formData)
            .then((res) => {
              console.log("res");
              console.log(res);
              if (res.data.code == 200) {
                this.$message.success("成功提交申诉");
                this.dialogAppealForm = false;
                this.complainedForm.author = "";
                this.complainedForm.reason = "";
              } else {
                this.$message.info("提交申诉失败");
              }
            });
        }
      }
    },
  },
};
</script>

<style scoped>
.el-card-define {
  min-height: 100%;
  height: 100%;
}
.el-card-define >>> .el-card__body {
  height: 100%;
}
.title {
  margin: 10px 0;
  font-weight: 700;
  font-size: 30px;
}
.keyword p,
.abstract p,
.publishImform p {
  margin: 3px 0;
}
.author p {
  margin: 0 0;
}
.el-divider {
  margin: 10px 0;
}
.a-name {
  text-decoration: underline;
  margin: 0 6px;
  cursor: pointer;
}
.a-name:hover {
  color: rgb(131, 183, 226);
}
.author .el-icon {
  margin: 0 5px 0 0;
}
.a-button {
  margin: 30px 0;
}
.c-content {
  border-style: none none solid none;
  border-width: 1px;
  padding: 10px;
  border-color: #8b8181;
}

.add-comment .el-button:hover {
  color: #b17735;
  font-weight: 600;
}
.glyphicon glyphicon-heart {
  color: rgb(161, 76, 90);
}

.AsideImfor .el-card {
  width: 80%;
  height: 91%;
  max-height: 500px;
  display: flex;
  flex-direction: initial;
  align-items: center;
  justify-content: center;
}

.article .el-button {
  background-color: #85bae1;
  color: black;
  font-weight: 500;
  height: 40%;
}

.recommend .el-card {
  width: 80%;
  display: flex;
  flex-direction: initial;
  justify-content: center;
}

.a-opr .el-button {
  background-color: rgb(245, 228, 182);
}

.recommend {
  justify-content: center;
  display: flex;
  margin: 0 0 20px 0;
}

.n-citation {
  color: #48aebf;
  text-decoration-line: underline;
  cursor: pointer;
}
.n-citation:hover {
  font-weight: 600;
}

.relative .el-icon:hover {
  color: #85bae1;
}

.choose-art:hover {
  text-decoration-line: underline;
  color: #81adcc;
}

.v-author:hover {
  text-decoration-line: underline;
  color: #808080;
}
.sort-choose button {
  border: none;
  background-color: white;
  cursor: pointer;
}
.sort-choose button:hover {
  text-decoration-line: underline;
  color: #82cedb;
}
.S-way {
  color: #db9119;
  font-weight: 501;
}
.dott {
  display: flex;
  align-items: center;
  font-weight: 800;
}
.ref-cite-art {
  font-size: 17px;
  color: #6a6666;
  margin: 10px 0;
  cursor: pointer;
}
.ref-cite-art:hover {
  background-color: #e7e7e7;
  color: #e3965d;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 120px;
  height: 120px;
  text-align: center;
}
.avatar-uploader-icon svg {
  margin-top: 45px; /* (120px - 28px) / 2 - 1px */
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.articleLink .el-card ::v-deep .el-card__body {
  padding: 5px 20px;
}

.AsideImfor .el-card ::v-deep .el-card__body {
  display: flex;
  align-items: center;
}

.commentBtn:hover {
  color: rgb(248, 121, 121);
}

.visitUser:hover {
  text-decoration: underline;
}
</style>
